<script lang="ts">
export default {
  name: "",
};
</script>
<script setup lang="ts">
import { NGrid, NGi, NCard, NAvatar, NList, NListItem } from "naive-ui";
import { useAuthStore } from "@/store";
const authStore = useAuthStore();
const stackData = [
  {
    name: "Vue",
    introduce: "渐进式 JavaScript 框架",
    icon: '<svg t="1654156328503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2164" width="64" height="64"><path d="M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z" fill="#41B883" p-id="2165"></path><path d="M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z" fill="#34495E" p-id="2166"></path></svg>',
  },
  {
    name: "TypeScript",
    introduce: "JavaScript类型的超集，它可以编译成纯JavaScript",
    icon: '<svg t="1654156355440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3684" width="64" height="64"><path d="M94.208 94.208v835.584h835.584V94.208H94.208z m634.92096 405.85216v0.012288c8.011776 0.024576 17.119232 0.436224 23.967744 1.179648 27.891712 3.016704 49.6128 15.050752 68.091904 37.715968 9.201664 11.290624 12.34944 16.2304 11.679744 18.343936-0.432128 1.363968-6.746112 5.885952-26.820608 19.21024-19.720192 13.092864-26.07104 17.014784-27.5456 17.014784-1.497088 0-4.614144-3.207168-9.105408-9.365504-8.6528-11.855872-17.485824-17.266688-31.13984-19.070976-14.68416-1.9456-27.856896 2.68288-34.308096 12.058624-5.515264 8.011776-6.3488 20.901888-1.96608 30.26944 5.07904 10.848256 14.270464 16.846848 49.494016 32.290816 40.624128 17.813504 61.210624 30.005248 76.204032 45.13792 16.146432 16.293888 24.326144 35.106816 26.83904 61.718528 1.226752 12.972032-0.272384 28.34432-3.98336 40.843264-9.10336 30.640128-33.66912 53.075968-69.67296 63.635456-9.95328 2.9184-19.214336 4.661248-28.37504 5.332992-13.985792 1.030144-34.002944 0.462848-46.051328-1.29024-30.482432-4.442112-64.892928-22.17984-82.051072-42.2912-8.423424-9.873408-19.177472-26.12224-19.177472-28.9792 0-1.380352 0.684032-2.164736 3.391488-3.885056 8.032256-5.103616 54.054912-31.412224 54.94784-31.412224 0.540672 0 2.945024 2.832384 5.341184 6.295552 5.429248 7.839744 18.78016 21.313536 25.567232 25.808896 5.543936 3.672064 12.634112 6.619136 21.051392 8.747008 4.820992 1.202176 7.3728 1.417216 17.891328 1.417216 10.747904-0.004096 12.951552-0.18432 17.760256-1.476608 12.71808-3.422208 22.644736-10.50624 26.851328-19.156992 1.8432-3.7376 1.880064-4.204544 1.880064-13.27104v-9.40032l-2.260992-4.48512c-5.474304-10.866688-17.270784-18.323456-54.56896-34.47808-17.13152-7.421952-38.11328-17.885184-46.30528-23.0912-18.696192-11.880448-31.653888-25.462784-40.157184-42.088448-8.45824-16.533504-9.71776-22.687744-9.73824-47.548416-0.02048-19.462144-0.053248-19.222528 3.975168-31.643648 3.65568-11.272192 11.139072-23.863296 19.400704-32.64512 16.4864-17.524736 40.577024-28.788736 66.367488-31.029248 3.29728-0.313344 7.716864-0.434176 12.52352-0.41984z m-221.92128 3.844096h0.008192c49.670144 0.024576 78.143488 0.196608 78.600192 0.483328 0.86016 0.53248 0.968704 4.855808 0.968704 32.444416v31.827968l-49.563648 0.180224-49.563648 0.180224v140.724224c0 77.400064-0.157696 141.185024-0.372736 141.748224-0.350208 0.948224-4.163584 1.019904-36.41344 1.019904h-36.018176l-0.372736-1.45408c-0.239616-0.79872-0.415744-64.587776-0.41984-141.750272l-0.012288-140.296192-49.5616-0.176128-49.565696-0.180224v-31.451136c0-24.94464 0.172032-31.625216 0.837632-32.288768 0.681984-0.702464 25.976832-0.882688 134.967296-0.991232 21.01248-0.02048 39.92576-0.03072 56.48384-0.02048z" fill="#0288D1" p-id="3685"></path></svg>',
  },
  {
    name: "Vite",
    introduce: "下一代前端开发与构建工具",
    icon: '<svg t="1654156401451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9137" width="64" height="64"><path d="M298.666667 85.333333v469.333334h128v384l298.666666-512h-170.666666l170.666666-341.333334H298.666667z" fill="#FFAB00" p-id="9138"></path></svg>',
  },
  {
    name: "NaiveUI",
    introduce: "一个 Vue 3 组件库",
    icon: '<svg t="1654156421479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9881" width="64" height="64"><path d="M335.657769 831.865977c0 10.134611 0 20.269222 0.202692 30.403833 0 2.189076 0 4.337614-0.202692 6.405074zM688.017924 152.765964v345.387543c-0.243231-110.426721-0.77023-220.893981-0.891846-331.320703a117.561487 117.561487 0 0 1 0.891846-14.06684z" fill="#93CEAA" p-id="9882"></path><path d="M687.085539 508.49081a68.50997 68.50997 0 0 0 0.932385-10.337303v322.929244l-169.207465-154.73524-85.130733-77.631121-51.240593-47.105671-22.782605-20.796222-8.391458-7.661766-0.608077-0.527c-2.067461-1.662076-4.053844-3.405229-5.959151-4.986228s-3.567383-2.959306-5.837536-2.270153a5.067305 5.067305 0 0 0-3.202537 3.64846v-304.03833l1.743153 1.580999 34.741446 31.417294c18.282838 16.215378 36.72783 32.430755 54.97013 48.646133q38.916906 34.863062 77.590582 70.131508 30.606525 27.809373 61.131974 55.699822c24.323066 22.174529 48.321825 44.592288 72.644891 66.604664 10.94538 9.89138 21.971837 19.580068 33.038832 29.309295 2.35123 2.067461 4.661921 4.053844 7.053689 6.161843a5.959151 5.959151 0 0 0 5.675382 0.729692 4.702459 4.702459 0 0 0 2.270153-2.918768c0.324308-1.540461 0.324308-2.59446 0.567538-3.851152z" fill="#4C9717" p-id="9883"></path><path d="M335.292923 510.801501a63.523742 63.523742 0 0 0-0.405385 11.107534c0 103.373032 0 206.746064 0.770231 310.078558v36.808907a60.199589 60.199589 0 0 1-23.796067 44.957134c-27.60668 23.066375-53.348592 48.281287-79.98235 72.523276-11.148072 10.134611-22.215067 20.269222-33.687447 30.160603s-40.984367 11.107534-57.321359-2.553922a318.145708 318.145708 0 0 1-34.619832-35.106293 51.727054 51.727054 0 0 1-15.120839-35.227908c0-2.918768-0.243231-6.121305 0-9.648149 0-6.080767 0-12.161533 0.202692-18.282838 0.202692-17.431531 0-34.9036 0-52.335132V294.772133a51.240593 51.240593 0 0 1 1.540461-12.891225 74.671814 74.671814 0 0 1 4.053844-10.702149 89.833192 89.833192 0 0 1 8.188766-14.512763l64.86151-64.86151 41.308675-41.268136a31.78214 31.78214 0 0 1 7.459073-5.594306 32.633447 32.633447 0 0 1 13.012841-4.053844 56.145745 56.145745 0 0 1 39.362829 7.256381 55.091745 55.091745 0 0 1 8.472535 6.364536l56.064668 50.348748v304.038329a13.701994 13.701994 0 0 0-0.364846 1.905307z" fill="#5FBC21" p-id="9884"></path><path d="M335.292923 510.801501a13.701994 13.701994 0 0 1 0.364846-1.662076v322.726552c-0.608077-103.373032-0.567538-206.746064-0.770231-310.078558a63.523742 63.523742 0 0 1 0.405385-10.985918z" fill="#E8CEAA" opacity=".6" p-id="9885"></path><path d="M924.357052 758.937317l-119.142487 109.453798a15.201916 15.201916 0 0 1-1.459384 0.972923l-0.445923 0.324308-0.810769 0.486461a56.753822 56.753822 0 0 1-67.942432-6.688843l-7.175304-6.283459-39.524983-36.119754V152.765964c0.648615-5.634844 1.621538-11.269687 2.716076-16.782916 2.837691-14.391148 15.485686-21.525914 25.133835-30.525448 20.958376-19.458453 42.565366-38.187214 63.929126-57.240283 14.715455-13.134456 29.390372-26.30945 44.227442-39.362829 12.931764-11.391303 37.984522-10.823765 50.146056-3.770075a40.984367 40.984367 0 0 1 8.431996 6.526689l13.701994 13.215533 11.066995 10.580534 10.094073 9.769765a46.416518 46.416518 0 0 1 7.215843 8.472535 47.551595 47.551595 0 0 1 6.891535 26.187834c-0.202692 59.429359 0.243231 118.858718 0.364846 178.369154q0.364846 151.411088 0.648615 302.822176 0 77.590582 0.283769 155.140625v7.094228c0.608077 15.404609 0.283769 25.579758-8.350919 35.673831z" fill="#5FBC21" p-id="9886"></path></svg>',
  },
  {
    name: "UnoCSS",
    introduce: "下一代实用优先的CSS框架",
    icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="64" height="64" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" style="color: rgb(72, 176, 241);"><g fill="#333"><path fill-opacity=".6" d="M137.176 195.927c0-32.812 26.6-59.412 59.412-59.412S256 163.115 256 195.927s-26.6 59.412-59.412 59.412s-59.412-26.6-59.412-59.412Z"></path><path fill-opacity=".3" d="M137.176 59.412C137.176 26.6 163.776 0 196.588 0S256 26.6 256 59.412v53.471a5.941 5.941 0 0 1-5.941 5.941H143.117a5.941 5.941 0 0 1-5.941-5.94V59.411Z"></path><path d="M118.824 195.927c0 32.812-26.6 59.412-59.412 59.412S0 228.74 0 195.927v-53.471a5.94 5.94 0 0 1 5.941-5.941h106.942c3.28 0 5.941 2.66 5.941 5.941v53.47Z"></path></g></svg>',
  },
  {
    name: "Pinia",
    introduce: "vue状态管理框架，支持vue2、vue3",
    icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="64" height="64" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="color: rgb(254, 207, 72);"><path fill="currentColor" d="M14.4 7.7C16.4 6.4 19 7 19 7c-1.8-2.4-3.9-2.3-5.4-1.8V5c1.1-1.6 3.3-1.5 3.3-1.5c-1.6-1.4-3-1-3.9-.5c-.5-1.2-1-2-1-2c-.4.7-.7 1.4-1 2.1c-.9-.6-2.4-1-4 .4c0 0 2.3 0 3.4 1.7C8.9 4.7 6.8 4.6 5 7c0 0 2.6-.6 4.6.7C7.5 8.9 6 11.7 6 15c0 4.4 2.7 8 6 8s6-3.6 6-8c0-3.3-1.5-6.1-3.6-7.3m1.4 9.1c-.1.4-.2.8-.4 1.2L14 16l-1.5 2l1.6 2.1c-.3.2-.5.4-.8.6L12 19l-1.3 1.7c-.3-.1-.6-.3-.8-.6l1.6-2.1l-1.5-2l-1.5 1.9c-.1-.4-.3-.8-.4-1.2L9.5 15l-1.3-1.8c.1-.4.2-.8.4-1.2l1.4 2l1.5-2l-1.6-2.1c.3-.2.5-.4.8-.6L12 11l1.3-1.7c.3.1.6.3.8.6L12.5 12l1.5 2l1.5-1.9c.1.4.3.8.4 1.2L14.5 15l1.3 1.8M12 13l1.5 2l-1.5 2l-1.5-2l1.5-2Z"></path></svg>',
  },
];
const dynamicData = [
  {
    user: {
      avatar: authStore.user?.avatar,
      name: authStore.user?.nickName,
    },
    content: "创建了此项目",
    time: "2022-06-22",
  },
  {
    user: {
      avatar: authStore.user?.avatar,
      name: authStore.user?.nickName,
    },
    content: "创建了此项目",
    time: "2022-06-22",
  },
  {
    user: {
      avatar: authStore.user?.avatar,
      name: authStore.user?.nickName,
    },
    content: "创建了此项目",
    time: "2022-06-22",
  },
  {
    user: {
      avatar: authStore.user?.avatar,
      name: authStore.user?.nickName,
    },
    content: "创建了此项目",
    time: "2022-06-22",
  },
];
</script>
<template>
  <n-grid :x-gap="10" :y-gap="10" :item-responsive="true" class="mt-3">
    <n-gi span="0:24 640:24 1024:16">
      <n-card
        title="项目技术栈构成"
        :bordered="false"
        class="rounded-16px shadow-sm"
      >
        <n-grid :x-gap="10" :y-gap="5" :item-responsive="true">
          <n-gi
            span="0:8 640:8 1024:4"
            v-for="(item, index) in stackData"
            :key="index"
          >
            <div
              class="flex flex-col items-center border border-gray-100 rounded-6px p-1"
            >
              <div
                class="w-full h-100px flex items-center justify-center"
                v-html="item.icon"
              ></div>
              <div class="w-full h-80px p-1">
                <p class="text-xl font-bold text-center">{{ item.name }}</p>
                <p class="text-xs mt-1">{{ item.introduce }}</p>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </n-card>
    </n-gi>
    <n-gi span="0:24 640:24 1024:8">
      <n-card title="快捷操作" :bordered="false" class="rounded-16px shadow-sm">
      </n-card>
    </n-gi>
    <n-gi span="0:24 640:24 1024:16">
      <n-card title="动态" :bordered="false" class="rounded-16px shadow-sm">
        <n-list>
          <n-list-item v-for="(item, index) in dynamicData" :key="index">
            <template #prefix>
              <n-avatar :size="46" round :src="item.user.avatar"></n-avatar>
            </template>
            <p class="text-xl">{{ item.user.name }}{{ item.content }}</p>
            <p class="text-gray-500">{{ item.time }}</p>
          </n-list-item>
        </n-list>
      </n-card>
    </n-gi>
    <n-gi span="0:24 640:24 1024:8">
      <n-card title="任务" :bordered="false" class="rounded-16px shadow-sm">
      </n-card>
    </n-gi>
  </n-grid>
</template>
<style scoped lang="less"></style>
